<style lang="scss">
@import "../uv.scss";
</style>
<template>
  <div class="pricesInventory">
    <div style="transition: 0.3s;" :style="{transform: `translateY(${translateY}px)`}" v-if="pricesForm.specsList.length">
      <div class="fz32 f aic jcsb pr30 pt30 pb30 pl30" style="color: #666666">设置价格与库存
        <div @click="tabBatchClick" style="color: #D60012;" class="lh1 fz28">批量设置</div>
      </div>
      <div class="p1757580367 bfff" style="box-sizing: border-box">
        <uv-tabs @click="tabClick" :customStyle="{ height: '80rpx' }" :current="current" :scrollable="false" :inactiveStyle="{ color: '#999' }" :activeStyle="{ color: '#333' }" lineColor="#E60012" border :list="pricesForm.specsList"></uv-tabs>
      </div>
      <uv-form errorType="toast" labelWidth="100rpx" labelPosition="left" :labelStyle="{fontSize: '28rpx',color: '#9FA0A0'}" :model="pricesForm" ref="pricesForm" :rules="rules">
        <div class=" bfff pl30 pr30 pb30 pt30" v-for="(item, index) in pricesForm.specsList[current] && pricesForm.specsList[current].values" :key="index" style="border-bottom: 2rpx solid #D8D8D8;">
          <div class="pb10 f jcsb aic">
            <div class="fz30 p1757643725 fac">
              <uv-form-item labelWidth="0" :prop="`specsList.${current}.values.${index}._image`" label="">
                <uv-upload @delete="deletePic" @afterRead="afterRead" :name="String(index)" :fileList="item._image" :maxCount="1">
                  <div class="p1757580531 f aic jcc">
                    <uv-icon size="40rpx" color="#c9caca" name="camera"></uv-icon>
                  </div>
                </uv-upload>
              </uv-form-item>
              <div class="pl20">{{ item.name }}</div>
            </div>
            <button @click="setTap(index)" class=" common-button f aic m0 p0 fz30">
              <div style="color: #D60012!important;" class="lh1 pr10" v-if="!item.price || !item.market_price || !item.stock">待设置</div>
              <div class="lh1 pr10" v-else></div>
              <uv-icon color="#C9CACA" size="28rpx" name="arrow-right"></uv-icon>
            </button>
          </div>
          <div>
            <div class="p1757581234 f">
              <div class="p1757581219" :id="`S${current}V${index}price`">
                <uv-form-item :prop="`specsList.${current}.values.${index}.price`" label="售价">
                  <div @click.stop="dotDisabled = false,openKeyboardTap(`S${current}V${index}price`, {valueIndex: index, tipsValue: item.price, prop: 'price'})" :class="!item.price && 'cD60012'" class="number-container p1757901145">
                    {{ item.price || '必填项' }}
                    <div class="cursor-blink" v-if="currentId ==  `S${current}V${index}price`">|</div>
                  </div>
                </uv-form-item>
              </div>
              <div class="p1757581219" :id="`S${current}V${index}market_price`">
                <uv-form-item :prop="`specsList.${current}.values.${index}.market_price`" label="划线价">
                  <div @click.stop="dotDisabled = false,openKeyboardTap(`S${current}V${index}market_price`, {valueIndex: index, tipsValue: item.market_price, prop: 'market_price'})" :class="!item.market_price && 'cD60012'" class="number-container p1757901145">
                    {{ item.market_price || '必填项' }}
                    <div class="cursor-blink" v-if="currentId ==  `S${current}V${index}market_price`">|</div>
                  </div>
                </uv-form-item>
              </div>
              <div class="p1757581219" :id="`S${current}V${index}stock`">
                <uv-form-item :prop="`specsList.${current}.values.${index}.stock`" label="总库存">
                  <div @click.stop="dotDisabled = true,openKeyboardTap(`S${current}V${index}stock`, {valueIndex: index, tipsValue: item.stock, prop: 'stock'})" :class="!item.stock && 'cD60012'" class="number-container p1757901145">
                    {{ item.stock || '必填项' }}
                    <div class="cursor-blink" v-if="currentId ==  `S${current}V${index}stock`">|</div>
                  </div>
                </uv-form-item>
              </div>
              <div class="p1757581219" :id="`S${current}V${index}weight`">
                <uv-form-item label="重量">
                  <div @click.stop="dotDisabled = false,openKeyboardTap(`S${current}V${index}weight`, {valueIndex: index, tipsValue: item.weight, prop: 'weight'})" :class="!item.weight && 'cD8D8D8'" class="p1757901145 number-container">
                    {{ item.weight || '必填项' }}
                    <div class="cursor-blink" v-if="currentId ==  `S${current}V${index}weight`">|</div>
                  </div>
                </uv-form-item>
              </div>
            </div>
          </div>
        </div>
      </uv-form>
      <div class="bfff pl30 pr30 pt30 pb30">
        <button @click="submit(current)" class="p1757569449 common-button ml0 mr0 pt0 pb0">确认</button>
      </div>
    </div>
    <uv-popup ref="skuPopup" mode="bottom" :closeOnClickOverlay="false">
      <div :style="{transform: `translateY(${translatePopupY}px)`}" style="transition: 0.3s;">
        <div :style="{height: absNumber(translatePopupY) + 'px'}"></div>
        <div class="position-r p1757641432 bfff f aic  jcc pb30 pt30" style="z-index: 1;">
          <div style="text-align: center;" class="w100 fz34">设置价格与库存</div>
          <div @click="cancalTap" class="position-a" style="right: 30rpx;">
            <uv-icon size="40rpx" color="#9FA0A0" name="close"></uv-icon>
          </div>
        </div>
        <div @click="valueIndex = valueIndex - 1" v-if="specsPopList.length > 1 && valueIndex != 0" class="p1757640630 f aic jcc" style="left: 30rpx;">
          <uv-icon size="40rpx" color="#5F5F5F" name="arrow-left"></uv-icon>
        </div>
        <div @click="valueIndex = valueIndex + 1" v-if="specsPopList.length > 1 && valueIndex != specsPopList.length - 1" class="p1757640630 f aic jcc" style="right: 30rpx;">
          <uv-icon size="40rpx" color="#5F5F5F" name="arrow-right"></uv-icon>
        </div>
        <div class="p1757643276">
          <div class="p1757640806" :style="{transform: `translateX(-${(valueIndex ) * 100}vw)`}">
            <div class="p1757640856" v-for="(item, index) in specsPopList" :key="index">
              <div v-if="!isBatchSet" style="background-color: #F5F5F5;" class="p1757641018 pt30 pb30 f aic jcc">
                <div>
                  <uv-upload @delete="deletePic" @afterRead="afterRead" :name="String(index)" :fileList="item._image" :maxCount="1">
                    <div class="p1757639483 f aic jcc">
                      <uv-icon size="90rpx" color="#c9caca" name="camera"></uv-icon>
                      <div style="text-align: center;color:#9FA0A0" class="w100  fz32">上传图片</div>
                    </div>
                  </uv-upload>
                  <div style="text-align: center;" class="pt20 fz34">{{ item.name }}</div>
                </div>
              </div>
              <div class="p1757641432 pt30 pl30 pb30">
                <div class="f aic">
                  <div class="fz30 p1757640541" style="color: #666666;">售价</div>
                  <div @click.stop="dotDisabled = false,openKeyboardTap(`SV${index}price`, {valueIndex: index, tipsValue: item.price, prop: 'price'})" class="p1757639851 pr20  f aic">
                    <div class="fz30 f aic jcc p1757639831">¥</div>
                    <div :id="`SV${index}price`" :class="!item.price && 'cD8D8D8'" class="p1757903903 number-container">
                      {{ item.price || '请输入' }}
                      <div class="cursor-blink" v-if="currentId ==  `SV${index}price`">|</div>
                    </div>
                    <!-- <uv-input fontSize="30rpx" readonly color="#333" border="none" v-model.trim="item.price" placeholder="请输入" placeholderStyle="color:#C9CACA;font-size:30rpx"></uv-input> -->
                  </div>
                </div>
                <div class="f  pt30 aic">
                  <div class="fz30 p1757640541" style="color: #666666;">划线价</div>
                  <div @click.stop="dotDisabled = false,openKeyboardTap(`SV${index}market_price`, {valueIndex: index, tipsValue: item.market_price, prop: 'market_price'})" class="p1757639851 pr20 f aic">
                    <div class="fz30 f aic jcc p1757639831">¥</div>
                    <div :id="`SV${index}market_price`" :class="!item.market_price && 'cD8D8D8'" class="p1757903903 number-container">
                      {{ item.market_price || '请输入' }}
                      <div class="cursor-blink" v-if="currentId ==  `SV${index}market_price`">|</div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="f p1757641432 aic pl30 pb20 pt20">
                <div class="fz30 p1757640541" style="color: #666666;">库存</div>
                <div @click.stop="dotDisabled = true,openKeyboardTap(`SV${index}stock`, {valueIndex: index, tipsValue: item.stock, prop: 'stock'})" class="p1757639851 pl20 f aic">
                  <div :id="`SV${index}stock`" :class="!item.stock && 'cD8D8D8'" class="p1757903903 number-container">
                    {{ item.stock || '请输入' }}
                    <div class="cursor-blink" v-if="currentId ==  `SV${index}stock`">|</div>

                  </div>
                </div>
              </div>
              <div class="f p1757641432 aic pl30 pb20 pt20">
                <div class="fz30 p1757640541" style="color: #666666;">重量</div>
                <div @click.stop="dotDisabled = false,openKeyboardTap(`SV${index}weight`, {valueIndex: index, tipsValue: item.weight, prop: 'weight'})" class="p1757639851 pl20 f aic">
                  <div :id="`SV${index}weight`" :class="!item.weight && 'cD8D8D8'" class="p1757903903 number-container">
                    {{ item.weight || '请输入' }}
                    <div class="cursor-blink" v-if="currentId ==  `SV${index}weight`">|</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p1757642013 pl30 pb30 pt30 pr30">
          <button @click="submitPopTap" class=" common-button  fz32">{{isBatchSet ? '批量设置' : '确认'}}</button>
        </div>
      </div>

    </uv-popup>
    <u-lst-keyboard  :tooltip="false" mode="number" :dotDisabled="dotDisabled" @close="keyboardClose" @change="keyboardConfirm" ref="keyboardRef" :text="tips"></u-lst-keyboard>
  </div>
</template>

<script>

import myLayOutVue from '../components/layOut.vue'
import keyboardPopupVue from '@/components/Lkeyboard.vue'
import { uploadImage } from '@/api'
import pageMixin from "../mixin/page.js";
export default {
  components: {
    'u-my-layOut': myLayOutVue,
    'u-lst-keyboard': keyboardPopupVue,
  },
  mixins: [pageMixin],
  data() {
    return {
      dotDisabled: true,
      translateY: 0,
      translatePopupY: 0,
      currentId: '',
      isBatchSet: false,
      isOpenPricePop: false,
      specsPopList: [],
      tips: '',
      current: 0,
      childIndex: 0,
      value: '',
      activeIndex: null,
      valueIndex: null,
      valueProp: null,
      copySpecsList: [],
      pricesForm: {
        specsList: []
      },
      statusBarHeight: 0,
      rules: {}
    }
  },
  mounted() {
    try {
      this.statusBarHeight = uni.getWindowInfo().statusBarHeight || uni.getMenuButtonBoundingClientRect().top;
    } catch (error) {
    }
  },
  methods: {
    initPage(data) {
      this.$set(this.pricesForm, 'specsList', data)
      this.$nextTick(() => {
        this._initRules()
      })
    },
    removeTrailingZeros(str) {
      if(this.isEmpty(str)) {
        return ''
      }
      return  String(str).replace(/(\.\d*?[1-9])0+$|\.0+$/, '$1');
    },

    // 批量设置
    tabBatchClick() {
      this.isBatchSet = true
      this.isOpenPricePop = true
      this.valueIndex = 0
      this.copySpecsList = JSON.parse(JSON.stringify(this.pricesForm.specsList))
      this.specsPopList = JSON.parse(JSON.stringify([this.pricesForm.specsList[this.current].values[0]]))
      this.$nextTick(() => {
        this.$refs.skuPopup.open()
      })
    },
    // 待设置
    setTap(valueIndex) {
      this.valueIndex = valueIndex
      this.isOpenPricePop = true
      this.copySpecsList = JSON.parse(JSON.stringify(this.pricesForm.specsList))
      this.specsPopList = JSON.parse(JSON.stringify(this.pricesForm.specsList[this.current].values))
      this.$nextTick(() => {
        this.$refs.skuPopup.open()
      })
    },

    tabClick(value) {
      if (this.current == value.index) return
      this.current = value.index
    },
    // 关闭弹框
    cancalTap() {
      this.$set(this.pricesForm, 'specsList', JSON.parse(JSON.stringify(this.copySpecsList)))
      this.$refs.skuPopup.close()
      setTimeout(() => {
        this._clearPop()
      }, 400);
    },
    // 弹框保存
    submitPopTap() {
      if (this.isBatchSet) {
        let { price, market_price, weight, stock } = this.specsPopList[0]
        this.pricesForm.specsList[this.current].values.forEach((item, index) => {
          this.$set(this.pricesForm.specsList[this.current].values[index], 'price', price)
          this.$set(this.pricesForm.specsList[this.current].values[index], 'market_price', market_price)
          this.$set(this.pricesForm.specsList[this.current].values[index], 'stock', stock)
          this.$set(this.pricesForm.specsList[this.current].values[index], 'weight', weight)
        })
      } else {
        this.$set(this.pricesForm.specsList[this.current], 'values', this.specsPopList)
      }
      this.$refs.skuPopup.close()
      setTimeout(() => {
        this._clearPop()

      }, 400);

    },
    // 保存
    submit() {
      let flag = false
      let current = -1
      let arr = JSON.parse(JSON.stringify(this.pricesForm.specsList))
      let specsList = []
      arr.forEach((item, index) => {
        specsList = specsList.concat(item.values)
        item.values.forEach(child => {
          if (!child.price || !child.market_price || !child.stock || !child._image.length) {
            flag = true
            if (current < 0) current = index
            this.$refs.pricesForm.validate().then(res => { }).catch(errors => {
            })
          }
        })
      })
      if (!flag) {
        specsList = specsList.map(item => {
          item.image = item._image[0].url
          return item
        })
        this.$emit('submitChange', { skus: specsList, _skus: JSON.parse(JSON.stringify(this.pricesForm.specsList)) })
      } else {
        this.current = current
      }
    },
    afterRead(file) {
      uni.showLoading({ title: '上传中', mask: true })
      uploadImage({ name: 'file', filePath: file.file.thumb }).then(res => {
        uni.hideLoading()
        if (res.code === 0) {
          if (this.isOpenPricePop) {
            this.$set(this.specsPopList[file.name], '_image', [{ url: res.data }])
          } else {
            this.$set(this.pricesForm.specsList[this.current].values[file.name], '_image', [{ url: res.data }])
          }
        }
      })
    },
    deletePic(file) {
      if (this.isOpenPricePop) {
        this.$set(this.specsPopList[file.name], '_image', [])
      } else {
        this.$set(this.pricesForm.specsList[this.current].values[file.name], '_image', [])
      }
    },
    openKeyboardTap(id, value) {
      let { valueIndex, tipsValue, prop } = value
      this.valueIndex = valueIndex
      this.currentId = id
      this.valueProp = prop
      this.tips = tipsValue
      this.$nextTick(() => {
        this.$refs.keyboardRef.open((keyboardHeight, keyboardTop) => {
          if (this.keyboardHeight == 0) this.keyboardHeight = keyboardHeight
          if (this.keyboardTop == 0) this.keyboardTop = keyboardTop
          uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect(data => {
            if ((keyboardTop - keyboardHeight) < (data.top + data.height)) {
              if (this.isOpenPricePop) {
                this.translatePopupY = -(((data.top + data.height) - (keyboardTop - keyboardHeight)) + this.safeAreaInsetsBottom + 10)
              } else {
                this.translateY = -(((data.top + data.height) - (keyboardTop - keyboardHeight)) + this.safeAreaInsetsBottom + 10)
                this.$emit('translate', this.translateY)
              }
            }
          }).exec();
        })
      })
    },
    keyboardConfirm(value) {
      if (this.isOpenPricePop) {
        this.$set(this.specsPopList[this.valueIndex], this.valueProp, value && String(value))
      } else {
        this.$set(this.pricesForm.specsList[this.current].values[this.valueIndex], this.valueProp, value && String(value))
      }
    },
    keyboardClose() {
      if (this.translateY != 0) this.$emit('translate', 0)
      this.translateY = 0
      this.currentId = ''
      this.tips = ''
      this.translatePopupY = 0
    },
    _clearPop() {
      this.isOpenPricePop = false
      this.isBatchSet = false
      this.specsPopList = []
      this.valueIndex = null
      this.copySpecsList = []
    },
    _initRules() {
      let rules = {}
      this.pricesForm.specsList.forEach((i, iI) => {
        i.values.forEach((c, cI) => {
          rules[`specsList.${iI}.values.${cI}.price`] = { type: 'string', required: true, message: '请输入售价', trigger: ['blur', 'change'] }
          rules[`specsList.${iI}.values.${cI}.market_price`] = { type: 'string', required: true, message: '请输划线价', trigger: ['blur', 'change'] }
          rules[`specsList.${iI}.values.${cI}.stock`] = { type: 'string', required: true, message: '请输入总库存', trigger: ['blur', 'change'] }
          rules[`specsList.${iI}.values.${cI}._image`] = { type: 'array', required: true, message: '请上传图片', trigger: ['blur', 'change'] }
        })
      })
      this.rules = rules
    },

  }
}
</script>
<style>
page {
  background-color: #F7F8F8;
  color: #333;
}
</style>
<style lang="scss" scoped>
@import "../common.scss";
.p1757580531 {
  width: 82rpx;
  height: 82rpx;
  border-radius: 4rpx;
  border: 2rpx solid #c9caca;
}
.p1757569449 {
  height: 90rpx;
  background: #de0012 !important;
  font-weight: 500;
  font-size: 36rpx !important;
  color: #ffffff !important;
  border-radius: 8rpx !important;
  width: 100%;
}
.p1757642013 {
  width: 100%;
  box-sizing: border-box;
  .common-button {
    height: 90rpx;
    background: #de0012 !important;
    font-weight: 500;
    font-size: 36rpx !important;
    color: #ffffff !important;
    border-radius: 8rpx !important;
    width: 100% !important;
  }
}
.p1757639851 {
  border-radius: 8rpx;
  border: 1rpx solid #cfcfcf;
  overflow: hidden;
  height: 55rpx;
  width: 300rpx;
  box-sizing: border-box;
  .p1757639831 {
    width: 57rpx;
    min-width: 57rpx;
    height: 100%;
    border-right: 1rpx solid #cfcfcf;
    background: #f7f7f7;
    margin-right: 20rpx;
  }
}
.p1757581234 {
  flex-wrap: wrap;
  background: #f7f8f8;
  border-radius: 4rpx;
  padding: 5rpx 20rpx;
  width: calc(100vw - 60rpx);
  box-sizing: border-box;
  .p1757581219 {
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    box-sizing: border-box;
  }
}

.p1757641018 {
  width: 100%;
  background-color: #f5f5f5;

  .p1757639483 {
    background: #ffffff;
    border-radius: 4rpx;
    width: 220rpx;
    height: 220rpx;
    flex-direction: column;
    border: 2rpx solid #c9caca;
  }
}
.p1757640630 {
  height: 280rpx;
  position: absolute;
  z-index: 1;
}
.p1757640541 {
  width: 150rpx;
}
.p1757643276 {
  width: 100vw;
  overflow: hidden;
}
.p1757640806 {
  display: flex;
  width: 100vw;
  transition: transform 0.5s;

  .p1757640856 {
    width: 100%;
    min-width: 100vw;
    max-width: 100vw;
  }
}
.p1757641432 {
  border-bottom: 1rpx solid #f2f2f2;
}
.p1757901145 {
  display: inline-block;

  overflow-x: auto;
  font-size: 28rpx;
  padding-bottom: 10rpx;
  padding-top: 10rpx;
  white-space: nowrap;
  max-width: calc(50vw - 170rpx);
}
.p1757903903 {
  font-size: 30rpx;
  display: inline-block;
  overflow-x: auto;
  white-space: nowrap;
  max-width: 100%;
}
</style>

